<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分页功能示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }

        th,
        td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }

        th {
            background-color: #f2f2f2;
        }

        .pagination {
            display: flex;
            list-style-type: none;
            padding: 0;
        }

        .pagination li {
            margin-right: 5px;
        }

        .pagination li a {
            display: block;
            padding: 5px 10px;
            border: 1px solid #ddd;
            text-decoration: none;
            color: #007BFF;
        }

        .pagination li a:hover {
            background-color: #f2f2f2;
        }

        .pagination li a.active {
            background-color: #007BFF;
            color: white;
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>用户名</th>
                <th>内容</th>
                <th>时间</th>
            </tr>
        </thead>
        <tbody id="table-body"></tbody>
    </table>
    <ul class="pagination" id="pagination"></ul>

    <script>
        // 原始数据
        const data = [
            { id: 293, username: "老李", content: "大家好啊", time: "2023-02-23 14:00:44" },
            { id: 258, username: "是是是", content: "三生三世", time: "2021-09-24 15:07:16" },
            { id: 257, username: "是是是", content: "三生三世", time: "2021-09-24 15:07:15" },
            { id: 256, username: "是是是", content: "三生三世", time: "2021-09-24 15:07:15" },
            { id: 255, username: "是是是", content: "三生三世", time: "2021-09-24 15:07:15" },
            { id: 254, username: "是是是", content: "三生三世", time: "2021-09-24 15:06:53" },
            { id: 253, username: "各个风格", content: "腹股沟管", time: "2021-09-24 14:42:22" },
            { id: 252, username: "密码", content: "是华菱", time: "2021-09-24 12:11:59" },
            { id: 251, username: "密码", content: "是华菱", time: "2021-09-24 12:11:57" },
            { id: 250, username: "密码", content: "是华菱", time: "2021-09-24 12:11:56" }
        ];
        const itemsPerPage = 5;
        const totalPages = Math.ceil(data.length / itemsPerPage);

        // 渲染表格数据
        const renderTable = (page) => {
            const start = (page - 1) * itemsPerPage;
            const end = start + itemsPerPage;
            const rows = data.slice(start, end).map(item => `
                <tr>
                    <td>${item.id}</td>
                    <td>${item.username}</td>
                    <td>${item.content}</td>
                    <td>${item.time}</td>
                </tr>
            `).join('');
            document.getElementById('table-body').innerHTML = rows;
        };

        // 渲染页码
        const renderPagination = () => {
            const pagination = document.getElementById('pagination');
            pagination.innerHTML = Array.from({ length: totalPages }, (_, i) => {
                const pageNum = i + 1;
                return `<li><a href="#" class="${pageNum === 1 ? 'active' : ''}">${pageNum}</a></li>`;
            }).join('');

            pagination.querySelectorAll('a').forEach((link, index) => {
                link.addEventListener('click', (e) => {
                    e.preventDefault();
                    const page = index + 1;
                    renderTable(page);
                    pagination.querySelectorAll('a').forEach(a => a.classList.remove('active'));
                    link.classList.add('active');
                });
            });
        };

        // 初始化页面
        renderTable(1);
        renderPagination();
    </script>
</body>

</html>